<template>
  <nut-swiper
      direction="horizontal"
      :loop="true"
      :canDragging="false"
      :paginationVisible="true"
      ref="demo3"
      class="bannerlist"
      :paginationClickable="true"
  >
    <div  class="nut-swiper-slide gray" >
      <ul  class="BannerList">
        <li v-for="(item,index) in BannerList" :key="index">
          <img :src="item.img" alt="">
          <br>
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
    <div  class="nut-swiper-slide gray_1" >
      <ul  class="BannerList">
        <li v-for="(item,index) in BannerList1" :key="index">
          <img :src="item.img" alt="">
          <br>
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
  </nut-swiper>
</template>

<script>
export default {
  name: "BannerList",
  data:()=>({
    BannerList:[],
    BannerList1:[]
  }),
  mounted() {
    let that=this;
    let url='http://localhost:5000';
    this.$http.get(url+'/data/ContentNav.json')
        .then(function (response) {
            that.BannerList=response.data.ContentNav.map(i=>({

              img: url + i['img'],
              name:i['name']
            }));
            that.BannerList1=response.data.ConNav.map(e=>({

              img:url+e['img'],
              name:e['name']
            }));
        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // always executed
        });

  }
}
</script>

<style scoped>
.BannerList{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  font-size: 0.75rem;
  padding-top: 0.625rem;
}
.BannerList li{
  width: 4.6875rem;
  height: 4.6875rem;
}
.BannerList li img{
  width: 2.5rem;
  height: 2.5rem;
}
.nut-swiper{
  height: 11rem !important;
}
</style>